<template>
	<view class="issueBuy">
		<!-- 介绍 -->
		<view class="induce">
			<u-form :model="induceForm" ref="induceRef" label-width="200rpx" :border-bottom="false">
				<u-form-item label="详细介绍" label-position="top" :border-bottom="false">
					<u-input v-model="induceForm.specific" type="textarea" border="true" height="180"
						auto-height="false" :clearable="false" placeholder="请在此描述你对设备的具体要求,如具体机型、预算、使用小时数、年限、设备来源等" />
				</u-form-item>
				<u-form-item label="联系电话">
					<view class="inpt">
						<u-input v-model="induceForm.phone" :clearable="false" placeholder="填写您的手机号" input-align='right'
							:focus="focus" />
						<text class="amend" @click="intFocus">点此修改</text>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- 提示 -->
		<view class="tishi">以下信息也很重要<text>（可以不填）</text></view>
		<!-- 预算 -->
		<view class="budget">
			<u-form :model="budgetForm" ref="budgetRef" label-width="200rpx">
				<u-form-item label="大概预算">
					<view class="inpt">
						<u-input v-model="budgetForm.make" :clearable="false" placeholder="请填写" input-align='right' />
						<text class="ten"> 万</text>
					</view>
				</u-form-item>

				<u-form-item label="需求地点">
					<view>
						<text>{{ budgetForm.region }}</text>
						<text class="amend" @click="areaShow = true">点此修改</text>
					</view>
				</u-form-item>

				<u-form-item label="身份选择">
					<text class="inquiry1" :class="{inqColor:inqudeg1}" @click="doclick1">我是机主自己用</text>
					<text class="inquiry2" :class="{inqColor:inqudeg2}" @click="doclick2">我是中介帮人求购</text>
				</u-form-item>
			</u-form>
		</view>
		<!-- 提交按钮 -->
		<u-button shape="circle" type="primary" size="medium" class="btn">确认提交</u-button>

		<!-- 地区弹出层 -->
		<view>
			<u-picker mode="region" v-model="areaShow" @confirm="areaConfirm"></u-picker>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				induceForm: {
					specific: '',
					phone: ''
				},
				budgetForm: {
					make: '',
					region: ''
				},
				focus: false,
				inqudeg1: false,
				inqudeg2: false,
				areaShow: false
			}
		},
		methods: {
			doclick1() {
				this.inqudeg1 = true;
				this.inqudeg2 = false;
			},
			doclick2() {
				this.inqudeg2 = true;
				this.inqudeg1 = false;
			},
			areaConfirm(e) {
				this.budgetForm.region = e.province.label + '-' + e.city.label + '-' + e.area.label
			},
			intFocus() {
				this.induceForm.phone = '';
				this.focus = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.issueBuy {

		/deep/.u-form-item__body {
			display: flex;
			justify-content: space-between;
			padding-right: 40rpx;
		}

		/deep/.u-form-item--right {
			flex: unset;
		}

		.induce,
		.budget {
			padding-left: 30rpx;
		}

		.amend {
			color: #cfa888;
			margin-left: 10rpx;
		}


		.inpt {
			display: flex;
		}

		.ten {
			margin-left: 10rpx;
		}

		.tishi {
			margin-top: 30rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			background-color: #fffdef;
			color: #6a3906;

			text {
				color: #ba3f3b;
			}
		}

		.inquiry1,
		.inquiry2 {
			display: inline-block;
			width: 230rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border: 1px solid #d8d8d8;
		}

		.inquiry1 {
			margin-right: 20rpx;
		}

		.inqColor {
			background-color: #b48a58;
			color: #fff !important;
			border: 0;
		}

		.btn {
			position: fixed;
			left: 50%;
			bottom: 30rpx;
			transform: translate(-50%);
		}

	}
</style>
